<template>
	<view class="container">

		<view class="card">
			<linkCardVue :data="data" :tree_img="info.tree_img" />
		</view>
		<view class="btns">
			<view @click="uploadbg">添加背景</view>
			<view @click="add()">添加链接</view>
		</view>
		<view class="form">
			<view class="form-item" v-for="it in list" :key="it.id">
				<view class="form-item-header">
					<view class="form-item-header-num">
						{{it.circle_id?'企业的':'我的'}}第{{it.sort}}个
					</view>
					<view class="form-item-header-img">
						<view class="form-item-header-img-i">
							<image :src="it.img" mode="aspectFill" v-if="it.img"></image>
							<view class="form-item-header-img-i-add" v-else>
								<image :src="ossUrl + `/static/5.png`" mode=""></image>
							</view>
							<view class="form-item-header-img-i-tx">图标</view>
						</view>
						<view class="form-item-header-img-i" @click="upload()" v-if="it.type==1"
							style="margin-left: 80rpx;">
							<image :src="it.qr_code" mode="aspectFill" v-if="it.qr_code"></image>
							<view class="form-item-header-img-i-add" v-else>
								<image :src="ossUrl + `/static/5.png`" mode=""></image>
							</view>
							<view class="form-item-header-img-i-tx">二维码</view>
						</view>
					</view>
					<view class="form-item-header-switch">
						<view style="margin-right: 20rpx;">
							<u--text
								:text="it.status === 0 ? '待审核' : it.status === 1 ? '审核通过' :  it.status === 2 ? '审核失败' : ''"
								:type="it.status === 0 ? 'warning' : it.status === 1 ? 'success' : it.status === 2 ? 'error' : ''"></u--text>
						</view>
						<u-switch v-model="it.state" @change="showchange(it,$event)" :activeValue="1" :inactiveValue="0"
							activeColor="#64aa6b" size="20"></u-switch>
						<!-- it.state === 1 ? '显示' : '隐藏' -->
					</view>
				</view>
				<block v-if="isManage||it.circle_id==0">
					<view class="form-item-c">
						<view class="form-item-c-l">
							<text>链</text>
							<text>接</text>
							<text>设</text>
							<text>置</text>
						</view>
						<view class="form-item-c-r">
							<view class="form-item-input">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28"
									color="#999"></uni-icons>
								<input type="text" placeholder="请输入引流标题,必填项" placeholder-class="ac" disabled
									:value="it.title" />
							</view>
							<view class="form-item-input" v-if="it.type==1">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28"
									color="#999"></uni-icons>
								<input type="text" placeholder="请输入网址" placeholder-class="ac" disabled
									:value="it.url" />
							</view>
							<view class="form-item-input" v-if="it.type==1">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28"
									color="#999"></uni-icons>
								<input type="text" placeholder="请输入用户名或账号ID" placeholder-class="ac" disabled
									:value="it.sign" />
							</view>
							<view class="form-item-input" v-if="it.finderUserName">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28"
									color="#999"></uni-icons>
								<input type="text" placeholder="请输入视频号finderUserName" placeholder-class="ac" disabled
									:value="it.finderUserName" />
							</view>
							<view class="form-item-input" v-if="it.appid">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28"
									color="#999"></uni-icons>
								<input type="text" placeholder="请输入appid" placeholder-class="ac" disabled
									:value="it.appid" />
							</view>
							<!-- <view class="form-item-input" v-if="it.feedId">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28" color="#999"></uni-icons>
								<input type="text" placeholder="请输入视频号feedId" placeholder-class="ac" disabled
									:value="it.feedId" />
							</view> -->
						</view>
					</view>
					<view class="form-item-c" v-if="it.type==1">
						<view class="form-item-c-l">
							<text>自</text>
							<text>定</text>
							<text>设</text>
							<text>置</text>
						</view>
						<view class="form-item-c-r">
							<view class="form-item-input" v-if="it.qr_code">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28"
									color="#999"></uni-icons>
								<input type="text" placeholder="下载二维码(至抖音扫码2)" placeholder-class="ac" disabled
									:value="it.qr_code_name" />
							</view>
							<view class="form-item-input" v-if="it.sign">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28"
									color="#999"></uni-icons>
								<input type="text" placeholder="复制(至抖音搜索用户名)" placeholder-class="ac" disabled
									:value="it.sign_name" />
							</view>
							<view class="form-item-input" v-if="it.url">
								<uni-icons custom-prefix="iconfont" type="icon-bianji" size="28"
									color="#999"></uni-icons>
								<input type="text" placeholder="复制地址(至抖音打开)" placeholder-class="ac" disabled
									:value="it.url_name" />
							</view>
						</view>
					</view>
				</block>

				<view class="form-item-footer">
					<view class="form-item-footer-tx" @click="toRule">如何获取链接和二维码？</view>
					<block v-if="isManage||it.circle_id==0">
						<view class="form-item-footer-r">
							<uni-icons custom-prefix="iconfont" color="#898989" type="icon-bianji1" size="25"
								@click="add(it)"></uni-icons>
							<uni-icons custom-prefix="iconfont" color="#898989" type="icon-shanchu" size="25"
								style="margin-left: 20rpx;" @click="del(it.id)"></uni-icons>
						</view>
					</block>

				</view>
				<view class="form-remark" v-if="it.status === 2">
					驳回原因：{{ it.prompt }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import linkCardVue from '@/components/linkCard/linkCard.vue';
	import {
		tree_list,
		tree_img,
		tree_state,
		tree_del
	} from '@/common/http/api.js'
	import {
		uploadImg
	} from '@/common/upload.js'
	export default {
		components: {
			linkCardVue
		},
		data() {
			return {
				list: [],
				info: '',
				isManage: ''
			}
		},
		onLoad(e) {
			if (e.isManage) { //圈主
				this.isManage = e.isManage
			}
			console.log(1)
		},
		onShow() {
			if(this.$store.state.cjj){
				tree_img({
					circle_id: this.isManage,
					tree_img: this.$store.state.cjj
				}).then(res => {
					this.$store.commit('setCjj', '')
				})
				
			}
		  
			this.init()
		},
		computed: {
			data() {
				return this.list.filter(i => i.state === 1)
			},

			// cropperUrl() {
			// 	return this.$store.state.cropperUrl
			// }

		},
		methods: {

			showchange(e, event) {
				console.log(e, event)

				let data = {}
				if (this.isManage) {

					data = {
						id: e.id,
						state: event,
						circle_id: this.isManage
					}
				} else {
					data = {
						id: e.id,
						state: event,

					}
				}

				tree_state(
					data
				).then(res => {
					this.init()
				})

			},

			toRule() {
				uni.navigateTo({
					url: '/pagesA/aboutUs/aboutUs?id=42'
				})
			},
			add(it) {
				if (it) {
					uni.setStorageSync('link-tree', it)
					uni.navigateTo({
						url: '/pagesC/link-tree/link-tree-edit?id=' + it.id + '&isManage=' + this.isManage
					})
				} else {
					let sort = 1
					if (Array.isArray(this.list) && this.list.length > 0) {
						sort = this.list[0].sort + 1
					}
					uni.navigateTo({
						url: '/pagesC/link-tree/link-tree-edit?sort=' + sort + '&isManage=' + this.isManage
					})
				}

			},
			del(id) {
				tree_del({
					id
				}).then(res => {
					this.init()
				})
			},
			init() {
				tree_list({
					circle_id: this.isManage
				}).then(res => {
					this.info = res.data
					this.list = res.data.list
				})
			},

			uploadbg() {
				uni.navigateTo({
					url: '/pagesC/clipper/clipper?w=' + 500 + '&h=' + 500 + '&type=4'
				})
			},

			upload() {



				uploadImg().then(res => {
 
					tree_img({
						circle_id: this.isManage,
						tree_img: res.data.url
					}).then(res => {
						this.init()
					})
				})
			},



		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	.container {
		width: 100%;
		padding-bottom: 30rpx;

		.card {
			margin-bottom: 30rpx;
		}

		.btns {
			width: 690rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			view {
				background: #58B481;
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				width: 200rpx;
				padding: 20rpx 10rpx;
				text-align: center;
			}
		}
	}

	.form {
		width: 690rpx;
		margin: 0 auto;

		.form-item {
			background: white;
			width: 100%;
			// box-shadow: 0rpx 0rpx 5rpx #999;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.form-item-header {
				width: 100%;
				padding: 70rpx 0 30rpx;
				position: relative;

				.form-item-header-num {
					width: fit-content;
					height: 50rpx;
					position: absolute;
					left: 20rpx;
					top: 20rpx;
					// border: 1px solid #999999;
					border-radius: 10rpx;

					input {
						box-sizing: border-box;
						padding: 0 5rpx;
					}
				}

				.form-item-header-img {
					width: 100%;
					box-sizing: border-box;
					padding: 0 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;

					.form-item-header-img-i {
						width: 150rpx;

						.form-item-header-img-i-add {
							width: 151rpx;
							height: 151rpx;
							border-radius: 20rpx;
							border: 1px solid #999999;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 48rpx;
								height: 49rpx;
							}
						}

						&>image {
							width: 150rpx;
							height: 150rpx;
						}

						.form-item-header-img-i-tx {
							width: 100%;
							text-align: center;
							font-size: 28rpx;
							margin-top: 10rpx;
						}
					}
				}

				.form-item-header-switch {
					width: fit-content;
					height: 50rpx;
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					display: flex;
					align-items: center;
				}
			}

			.form-item-c {
				background: #F6F6F6;
				border-radius: 30rpx;
				width: calc(100% - 60rpx);
				margin: 0 auto;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 40rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.form-item-c-l {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					color: #9D9D9B;
					font-size: 28rpx;
					margin-right: 30rpx;
				}

				.form-item-c-r {
					min-width: 0;
					flex: 1;

					.form-item-input {
						width: 100%;
						border-bottom: 1rpx solid #999;
						display: flex;
						align-items: center;

						input {
							min-width: 0;
							flex: 1;
							padding: 15rpx 0;
							margin-left: 10rpx;
							font-size: 28rpx;
						}

						.ac {
							color: #9D9D9B;
							font-size: 28rpx;
						}
					}
				}
			}

			.form-item-footer {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 30rpx 20rpx;

				.form-item-footer-tx {
					font-size: 28rpx;
					color: #58B481;
					flex: 1;
					min-width: 0;
				}

				.form-item-footer-r {
					display: flex;
				}
			}
		}
	}

	.form-remark {
		color: #e4393c;
		box-sizing: border-box;
		padding: 0 30rpx 20rpx;
		font-size: 28rpx;
	}
</style>